<template>
	<view>

		<!-- 聊天列表 -->
		<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'" :scroll-into-view="scrollInto" scroll-with-animation>
			<!-- 左边聊天对话 消息气泡 -->
			<block v-for="(item,index) in list" :key="index">
				<!-- 给每个元素加上id -->
				<view :id="'chat' + index">
					<user-chat-list :item="item" :index="index" :pretime="index > 0 ? list[index-1].create_time : 0"></user-chat-list>
				</view>
			</block>
		
		</scroll-view>

		<!-- 底部操作条 -->
		<view class="fixed-bottom border-top flex align-center" style="height: 100rpx;">
			<input type="text" v-model="content" class="flex-1 bg-light rounded ml-2 p-1" placeholder="文明发言" @confirm="submit"/>
			<view class="iconfont icon-fabu flex align-center justify-center animated font-lg" hover-class="jello"
				style="width: 100rpx;" @click="submit"></view>
		</view>
	</view>
</template>

<script>
	
	import userChatList from '@/components/user-chat/user-chat-list.vue';
	
	export default {
		components: {
			userChatList
		},
		data() {
			return {
				scrollInto: '',
				scrollH: 600,
				list: [{
						user_id: 1,
						avatar: "/static/default.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 2,
						avatar: "/static/demo/demo5.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 1,
						avatar: "/static/default.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 2,
						avatar: "/static/demo/demo5.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 1,
						avatar: "/static/default.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 2,
						avatar: "/static/demo/demo5.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 1,
						avatar: "/static/default.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 2,
						avatar: "/static/demo/demo5.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 1,
						avatar: "/static/default.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					},
					{
						user_id: 2,
						avatar: "/static/demo/demo5.jpg",
						username: "昵称",
						data: "你好啊",
						type: 'text',
						create_time: 1712821865
					}
				],
				content: '',  //消息内容
			}
		},
		
		onLoad() {
			uni.getSystemInfo({ //异步获取系统信息
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
		},
		//页面加载完成时调用
		onReady() {
			this.pageToBottom()
		},
		methods: {
			// 发送消息
			submit() {
				let obj = {
					user_id: 1,
					avatar: "/static/default.jpg",
					type: 'text',
					username: "昵称",
					data: this.content,
					create_time: (new Date).getTime()
				}
				if(this.content == '') {
					uni.showToast({
						title: '消息不能为空'
					});
					return
				}
				this.list.push(obj)
				//清空输入框
				this.content = ''
				this.pageToBottom()
			},
			//滚动到底部的方法
			pageToBottom() {
				console.log(this.list)
				let lastIndex = this.list.length - 1
				if (lastIndex < 0) return;
				this.scrollInto = 'chat' + lastIndex
				
			}
		}
	}
</script>

<style>

</style>